<template>
  <div class="home-third-content">
    <div v-for="item in thirdState" :key="item.pageHeaderTitle" class="home-third-content-col">

      <a-page-header>
        <template slot="title">
          <div class="home-third-content-header">
            <span class="home-third-content-space"/>
            <span>
              {{ item.pageHeaderTitle }}
            </span>
          </div>
        </template>
      </a-page-header>

      <template v-if="item.component === 'Row'">
        <a-row>
          <a-col
              v-for="(count, index) in renderCount"
              class="home-third-content-component-col"
              :span="24 / renderCount.length"
              :key="count.name"
              @click="colClick(index)"
          >
            <div>
              <div>
                <span class="home-third-content-component-col-total" :style="{color: count.color}">
                  {{ count.total }}
                </span>
                <span class="home-third-content-component-col-title">
                  {{ count.name }}
                </span>
              </div>
              <div>
                <img :src="require(`@/assets/images/home/${count.imgUrl}.png`)" alt=""/>
              </div>
            </div>
          </a-col>
        </a-row>
      </template>

      <template v-else>
        <business-tabs :active-key-index="activeKeyIndex"/>
      </template>

    </div>
  </div>
</template>

<script>
import {getCount} from "@/api/handle/handle";
import {getLocalStorage} from "@/utils/localstore";
import BusinessTabs from "@/views/home/components/BusinessTabs";

export default {
  name: "Business",
  components: {
    BusinessTabs
  },
  data() {
    return {
      thirdState: [
        {
          pageHeaderTitle: '在线服务成效度',
          component: 'Row'
        },
        {
          pageHeaderTitle: '办事记录',
          component: 'Table'
        }
      ],
      renderCount: [],
      activeKeyIndex: '0'
    }
  },
  created() {
    getCount({
      userId: getLocalStorage('userId')
    }).then((res) => {
      const {success, data} = res
      if (success) {
        this.renderCount = data.map((item) => {
          return item;
        })
      }
    })
  },
  methods: {
    colClick(index) {
      this.activeKeyIndex = String(index)
    }
  }
}
</script>

<style scoped lang="less">

.home-third-content {
  display: flex;
  flex-direction: column;

  .home-third-content-col {
    margin-bottom: 12px;

    .home-third-content-header {
      display: flex;
      align-items: center;
    }
  }

  .ant-row {
    padding-top: 12px;
  }

  .home-third-content-component-col {
    > div {
      background: white;
      width: 95%;
      margin: 0 auto;
      height: 120px;
      min-height: 120px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);

      > div:first-child {
        flex: 2 1;
        display: flex;
        flex-direction: column;

        .home-third-content-component-col-total {
          font-size: 28px;
          margin-bottom: 15px;
        }

        .home-third-content-component-col-title {
          font-size: 18px;
          color: #666666;
        }
      }

      > div:last-child {
        flex: 4 1;

        img {
          height: 90px;
        }
      }
    }
  }
}

.home-third-content-space {
  height: 20px;
  background: #1e96d2;
  width: 8px;
  display: inline-block;
  margin-right: 10px;
}

/deep/ * {
  .ant-page-header {
    padding: 0 !important;
  }

  .ant-tabs {
    margin-top: 12px !important;

    .ant-tabs-bar {
      border-bottom: none !important;
      margin: unset !important;
    }

    .ant-tabs-tab:not(:last-child):after {
      content: '';
      display: block;
      position: absolute;
      height: 18px;
      width: 1px;
      background: black;
      top: 50%;
      right: -16px;
      transform: translate(0, -50%);
    }

    .ant-tabs-tab-active {
      color: #1890ff !important;
      font-weight: bold !important;
    }

    .ant-tabs-ink-bar {
      display: none !important;
    }
  }
}

</style>
